<template>
  <div class="container">
    <p class="oneP">小程序推广解决方案</p>
    <p class="twoP">智能大数据技术提供营销解决方案</p>
    <button class="oneButton" @click="toAISelect">一键生成方案</button>
    <ul class="ul1">
      <li @mouseover="enterObj(1)" @mouseout="enterObj('')">
        <div style="margin-top:45px;" class="animation-box">
          <img :src="arr1[0][0]" :class="{'animation1':this.animation===1}">
        </div>
        <p>{{arr1[0][1]}}</p>
        <p>{{arr1[0][2]}}</p>
        <p>{{arr1[0][3]}}</p>
        <p>{{arr1[0][4]}}</p>
        <!-- <img :src="arr1[0][5]"> -->
      </li>
      <li @mouseover="enterObj(2)" @mouseout="enterObj('')">
        <div style="margin-top:45px;" class="animation-box">
          <img :src="arr1[1][0]" :class="{'animation1':this.animation===2}">
        </div>
        <p>{{arr1[1][1]}}</p>
        <p>{{arr1[1][2]}}</p>
        <p>{{arr1[1][3]}}</p>
        <p>{{arr1[1][4]}}</p>
        <!-- <img :src="arr1[1][5]"> -->
      </li>
      <li @mouseover="enterObj(3)" @mouseout="enterObj('')">
        <div style="margin-top:45px;" class="animation-box">
          <img :src="arr1[2][0]" :class="{'animation3':this.animation===3}"><br>
          <img src="../../assets/img/1微信小程序/切图/37.png">
        </div>
        <p style="margin-top:26px">{{arr1[2][1]}}</p>
        <p>{{arr1[2][2]}}</p>
        <p>{{arr1[2][3]}}</p>
        <p>{{arr1[2][4]}}</p>
        <!-- <img :src="arr1[2][5]"> -->
      </li>
    </ul>
    <mask-toast v-if="showMaskToast" @closeMask="closeMask"></mask-toast>
  </div>
</template>
<script>
require('../../assets/css/p.css')
const img1 = require('../../assets/img/1微信小程序/切图/32.png')
const img2 = require('../../assets/img/1微信小程序/切图/34.png')
const img3 = require('../../assets/img/1微信小程序/切图/36.png')
const img4 = require('../../assets/img/1微信小程序/切图/33.png')
import maskToast from '../upgrade/upgradeToast'
export default {
  data() {
    return {
      arr1: [
        [
          img1,
          '一站式智能服务体系',
          '线上线下流量全覆盖',
          '丰富运营经验',
          '大幅提升转化率',
          img4
        ],
        [
          img2,
          '专属客户服务',
          '服务快速响应、多渠道整合',
          '项目经理全程跟进',
          '实现广告主个性化营销推广需求'
        ],
        [
          img3,
          '全网覆盖优质推广资源',
          '紧跟小程序发展趋势',
          '结合媒体智能投放系统',
          '定位精准品牌受众与媒体粉丝'
        ]
      ],
      animation: null,
      animationIndex: null,
      // animation1:{
      //   transform:'rotate(360deg)',
      // },
      // animation2:{
      //   // width:'300px',
      // },
      debug: true,
      showMaskToast: false
    }
  },
  methods: {
    enterObj(index) {
      this.animation = index
    },
    toAISelect(){
      if(this.debug){
          this.showMaskToast = true
          return
      }
      this.$router.push({path:'/AISelect'})
    },
    closeMask(data){
        this.showMaskToast = data
    }
  },
  components: {
    maskToast
  }
}
</script>
<style scoped>
.container {
  width: 1200px;
  margin: 0 auto;
  margin-top: 80px;
  text-align: center;
  margin-bottom: 80px;
}
.oneButton {
  width: 140px;
  box-shadow: 0px 4px 19px #ed9191;
}
.animation3 {
  transform: rotate(360deg);
}
@keyframes aa {
  0% {
     transform:translate( -15px, 0)
  }
  100% {
     transform:translate( 15px, 0)
  }
}
.animation1{
 animation: aa 1s infinite;
}
.animation2{
 transform: rotateY(360deg);
}
.ul1 {
  overflow: hidden;
  margin-top: 60px;
  margin-bottom: 70px;
  position: relative;
  padding: 10px;
}
.ul1 > li {
  float: left;
  width: 350px;
  height: 376px;
  text-align: center;
  margin-left: 60px;
  -moz-box-shadow: 0px 0px 20px #ebebeb;
  -webkit-box-shadow: 0px 0px 20px #ebebeb;
  box-shadow: 0px 0px 20px #ebebeb;
}
.ul1 > li:first-child {
  margin-left: 0;
  position: relative;
}
.ul1 > li > img:nth-child(1) {
  margin-top: 60px;
  /* transform: rotate(0); */
  animation-play-state: running;
}
.animation-box img {
  -webkit-transition: all 1s, opacity 1s;
  transition: all 1s, opacity 1s;
}
.ul1 > li > p:nth-child(2) {
  margin-top: 30px;
  font-size: 18px;
  font-weight: bold;
}
.ul1 > li > p:nth-child(3) {
  margin-top: 30px;
  font-size: 16px;
}
.ul1 > li > p:nth-child(4),
.ul1 > li > p:nth-child(5) {
  margin-top: 12px;
  font-size: 16px;
}
.ul1 > li > img:nth-child(6) {
  position: absolute;
  top: 110px;
  right: 118px;
}
</style>


